<template>
  <div class="app-container">
    <el-drawer :title="title" :visible.sync="openDetail" size="100%" @close="cancel" :append-to-body="true"
      v-loading="loading" element-loading-text="文件正在加载，请稍后！" element-loading-spinner="el-icon-loading">
      <template v-slot:title>
        <span class="titleDiv">{{ title }}</span>
      </template>
      <div style="padding: 0 20px">
        <vue-office-excel v-if="fileType == 'xlsx'" :src="url" style="height: 88vh" @rendered="renderedHandler"
          @error="errorHandler" />
        <vue-office-docx v-if="fileType == 'docx'" :src="url" style="height: 100vh;" @rendered="renderedHandler"
          @error="errorHandler" />
        <div v-if="fileType == 'png' || fileType == 'jpg' || fileType == 'jpeg'">
          <el-image @load="renderedHandler" @error="errorHandler" :src="url" style="width: 90%;" />
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
//引入VueOfficeExcel组件
import VueOfficeExcel from "@vue-office/excel";
//引入相关样式
import "@vue-office/excel/lib/index.css";
//引入VueOfficeDocx组件
import VueOfficeDocx from "@vue-office/docx";
//引入相关样式
import "@vue-office/docx/lib/index.css";
import { Message, Loading } from "element-ui";
import { saveAs } from "file-saver";

let downloadLoadingInstance;
export default {
  data() {
    return {
      openDetail: false,
      title: "文件预览",
      url: "",
      fileType: null,
      loading: false
    };
  },
  components: {
    VueOfficeExcel,
    VueOfficeDocx
  },
  methods: {
    //初始化函数
    init(url) {
      const fileName = url.split(".");
      this.fileType = fileName[fileName.length - 1];
      console.log(
        fileName,
        this.fileType,
        url,
        "================filetype=========="
      );
      this.url = url;
      this.openDetail = true;
      this.loading = true;
      //   downloadLoadingInstance = Loading.service({
      //     text: "正在打开预览文件，请稍候",
      //     spinner: "el-icon-loading",
      //     background: "rgba(0, 0, 0, 0.7)"
      //   });
    },
    renderedHandler() {
      console.log("渲染完成111111111111111");
      //   downloadLoadingInstance.close();
      this.loading = false;
    },
    errorHandler(e, data) {
      console.log(e, data, "渲染失败222222222222");
      if (this.url !== "") {
        Message.error("渲染失败！");
      }
      //   downloadLoadingInstance.close();
      this.loading = false;
    },
    // 取消按钮
    cancel() {
      this.openDetail = false;
      this.url = "";
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped></style>